<template>
    <div class="roles">
        <el-row>
        <el-col :span="24">
        <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>角色管理</el-breadcrumb-item>
        <el-breadcrumb-item>角色列表</el-breadcrumb-item>
        </el-breadcrumb>
        </el-col>
     </el-row>
        <el-button type="primary" plain >添加角色</el-button>
      <el-table
    :data="roleslist"
     border
    style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="scope">
        <el-form label-position="left">
          <el-row  v-for="firstchildren in scope.row.children" :key="firstchildren.id">
             <el-col :span="4">
                <el-tag closable @close="handleClose(scope.row,firstchildren.id)">{{firstchildren.authName}}</el-tag>
                <span class="el-icon-arrow-right"></span>
             </el-col>
            <el-col  :span="20">
                <el-row v-for="secondchildren in firstchildren.children" :key="secondchildren.id">
                    <el-col :span="4" >
                        <el-tag closable type="success" @close="handleClose(scope.row,secondchildren.id)">{{secondchildren.authName}}</el-tag>
                        <span class="el-icon-arrow-right"></span>
                    </el-col>
                    <el-col :span="20">
                        <el-tag closable v-for="thirdchildren in secondchildren.children"  :key="thirdchildren.id" type="warning" @close="handleClose(scope.row,thirdchildren.id)">{{thirdchildren.authName}}</el-tag>
                    </el-col>
                </el-row>  
            </el-col>
             
          </el-row>
          <el-row v-if="scope.row.children.length ==0">
            <el-col :span="24" >什么都没有,去添加吧</el-col>
          </el-row>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column
      label="角色名称"
      width="150px"
      prop="roleName">
    </el-table-column>
    <el-table-column
      label="描述"
      prop="roleDesc">
    </el-table-column>
    <el-table-column
      label="操作"
      prop="desc">
      <template slot-scope="scope">
        <el-button  size="mini"  icon="el-icon-edit"  type="primary" plain  @click="handleEdit(scope.row)"></el-button>                
        <el-button   size="mini"  icon="el-icon-delete" type="danger" plain @click="handleDelete(scope.row)"></el-button>  
        <el-button  size="mini" icon="el-icon-check" type="warning" plain  @click="rolesGrant(scope.row)"></el-button>                          
      </template>
    </el-table-column>
   
  </el-table>

<el-dialog

  title="授权角色"
  :visible.sync="dialogVisible">
   <el-tree
   class="tree-container"
  :data="data2"
  show-checkbox
  :default-expand-all="true"
  node-key="id"
  ref="tree"
  :default-checked-keys="checkedlist"
  :props="defaultProps">
</el-tree>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary"  @click="getChecked">确 定</el-button>
  </span>
</el-dialog>
  
    </div>
</template>
<script>
    import {getroles,deleteroles,getrightlist,grantlist} from '@/api';
   export default {
    data() {
      return {
        roleslist: [],
        dialogVisible:false,
        data2: [],
        defaultProps: {
          children: 'children',
          label: 'authName'
        },
        //默认展开的节点
        checkedlist:[],
        //当前选中的行
        selectlist:{},
      }
    },
    created () {
        this.list()
    },
    methods:{
        //角色列表
        list(){
            getroles().then(res=>{
            // console.log(res,1111);
            if(res.meta.status ===200){
                this.roleslist = res.data
            }
        })
        },
        //删除权限
        handleClose(row,rightId){
            deleteroles({roleId:row.id,rightId:rightId}).then(res=>{
                // console.log(res,123123);
                if(res.meta.status ===200){
                    row.children = res.data
                }else{
                    this.$message({
                        type:'error',
                        message:res.meta.msg
                    })
                }
            })
        },
        //角色授权获取
        rolesGrant(row){
            this.dialogVisible = true;
            this.checkedlist.length=0;
            this.selectlist = row
            getrightlist({type:'tree'}).then(res=>{
                if(res.meta.status === 200){
                    this.data2 = res.data
                   this.selectlist.children.forEach(first=>{
                        if(first.children && first.children.length !==0){
                            first.children.forEach(second=>{
                                if(second.children && second.children.length !==0){
                                    second.children.forEach(third=>{
                                        this.checkedlist.push(third.id)
                                    })
                                }
                            })
                        }
                   }) 
                }
            })
        },
        //角色授权
         getChecked() {             
         let rids =this.$refs.tree.getCheckedKeys().join(',')
         //grantlist({roleId:this.selectlist.id,rids:rids})
        grantlist(this.selectlist.id,{rids:rids}).then(res=>{
            if(res.meta.status ===200){
                this.$message({
                    type:'success',
                    message:res.meta.msg
                })
                this.dialogVisible =false
                this.list()
            }
        })
      },
    }
  } 

</script>
<style lang="scss" scoped>
.roles {
  .el-tag {
    margin-right: 5px;
    margin-bottom: 5px;
  }
  .tree-container {
    height: 300px;
    overflow: auto;
  }
}
</style>

